<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>支出分析</title>
    <script src="/static/plugins/easyui/jquery.min.js"></script>
</head>
<script>
    $(function () {
        /*今日支出的总金额*/
        $.get('/spendPointItem/selectAmountByDay.do', function (data) {
            $("#bircount").html(data);
        }, "json");

        /*本月支出的总金额*/
        $.get('/spendPointItem/selectAmountByMouth.do', function (data) {
            $("#totalClient").html(data);
            $("#average").html((data / 30).toFixed(2));
        }, "json");

        /*累计支出的总金额*/
        $.get('/spendPointItem/selectAllAmount.do', function (data) {
            $("#totalExpense").html(data);
        }, "json");


        /*累计支出次数*/
        $.get('/spendPointItem/selectSpendTimes.do', function (data) {
            $("#totalCount").html(data);
        }, "json");

        /*平均支出*/
        $.get('/spendPointItem/queryAvgSpend.do', function (data) {
            $("#averageExpense").html(data.toFixed(2));
        }, "json");

        /*支出第一*/
        $.get('/spendPointItem/queryMaxSpend.do', function (data) {
            $("#top_datagrid").html(data.toFixed(2));
        }, "json");
    })
</script>
<body>
<table>
    <tr>
        <td>
            <div id="p" class="easyui-panel" style="width:250px;height:200px;">
                <p style="font-size:14px">今日支出</p>
                <p style="font-size:25px ;" align="center"><span style="color: red"><i id="bircount">0</i>元</span></p>
            </div>
        </td>

        <td>
            <div class="easyui-panel" style="width:250px;height:200px;">
                <p style="font-size:14px">本月支出</p>
                <p style="font-size:25px ;" align="center"><span style="color: red"><i id="totalClient">0</i>元</span>
                </p>
                <p style="font-size:14px">平均每日支出<span style="color: red"><i id="average">0</i></span>元</p>
            </div>
        </td>
        <td>
            <div class="easyui-panel" style="width:250px;height:200px;">
                <p style="font-size:14px">累计支出</p>
                <p style="font-size:25px ;" align="center"><span style="color: red"><i id="totalExpense">0</i>元</span>
                </p>
                <p style="font-size:14px">共<span style="color: red"><i id="totalCount">0</i></span>
                    笔,平均支出<span style="color: red"><i id="averageExpense">0</i></span>元</p>
            </div>
        </td>
        <td>
            <div class="easyui-panel" style="width:250px;height:200px;">
                <p style="font-size:25px ;" align="center">支出<span style="color: red"><i>TOP1</i></span></p>
                <p style="font-size:25px ;" align="center"><span style="color: red"><i id="top_datagrid">0</i>元</span>
                </p>
            </div>
        </td>
        <td>
            <div class="easyui-panel" style="width:250px;height:200px;">
                <input type="button" value="刷新" onclick="reload()">
            </div>
            <script>
                function reload() {
                    window.location.reload();
                }
            </script>
        </td>
    </tr>
</table>
<hr>
<br><br>
<!--折线图-->
<div id="mainline" style="height:400px;"></div>


<hr>
<br><br>


<!--柱状图-->
<div id="mainbar" style="height:400px"></div>


<!--引入EChart单文件-->
<script src="/static/plugins/echart/echarts-all.js"></script>

<!--折线图js-->
<script type="text/javascript">
    //基于准备好的dom,初始化echarts图表
    var myChart = echarts.init(document.getElementById('mainline'));

    option = {
        title: {
            text: '支出分析',
            subtext: '时间'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['最高支出']
        },
        toolbox: {
            show: true,
            feature: {
                mark: {show: true},
                dataView: {show: true, readOnly: false},
                magicType: {show: true, type: ['line', 'bar']},
                restore: {show: true},
                saveAsImage: {show: true}
            }
        },
        calculable: true,
        xAxis: [
            {
                type: 'category',
                boundaryGap: false,
                data: ${x}
            }
        ],
        yAxis: [
            {
                type: 'value',
                axisLabel: {
                    formatter: '{value}'
                }
            }
        ],
        series: [
            {
                name: '最高支出',
                type: 'line',
                data:${y},
                markPoint: {
                    data: [
                        {type: 'max', name: '最大值'},
                        {type: 'min', name: '最小值'}
                    ]
                },
                markLine: {
                    data: [
                        {type: 'average', name: '平均值'}
                    ]
                }
            }
        ]
    };


    //为echarts对象加载数据
    myChart.setOption(option);
</script>

<!--树状图js-->
<script type="text/javascript">

    //基于准备好的dom,初始化echarts图表
    var myChart = echarts.init(document.getElementById('mainbar'));

    option = {
        title: {
            text: '支出详细总价',
            x:${h}
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['支出分类总额'],
            x: 'center'
        },
        toolbox: {
            show: true,
            feature: {
                mark: {show: true},
                dataView: {show: true, readOnly: false},
                magicType: {show: true, type: ['line', 'bar']},
                restore: {show: true},
                saveAsImage: {show: true}
            }
        },
        calculable: true,
        xAxis: [
            {
                type: 'category',
                data: ${z}
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: '支出总额',
                type: 'bar',
                data:${h},
                markPoint: {
                    data: [
                        {type: 'max', name: '最大值'},
                        {type: 'min', name: '最小值'}
                    ]
                },
                markLine: {
                    data: [
                        {type: 'average', name: '平均值'}
                    ]
                }
            }
        ]
    };
    //为echarts对象加载数据
    myChart.setOption(option);
</script>

</body>
</html>
